<template>
	<view>
		<uni-segmented-control :current="current" :values="items" styleType='text' :active-color="activeColor" @clickItem="onClickItem" />
		<view class="box_4 flex-col" v-for="item in 10" style="margin-top: 20px;">
			<text class="text_4">2023.06.22&nbsp;&nbsp;07:26&nbsp;</text>
			<text class="text_5">
				眼镜收到好些日子了,一直没有时间评价,质量不错,尤其是包装,高端大气上档次,包装真的很到位,送人贼有面子!自己带也不错
			</text>
			<image class="image_3" referrerpolicy="no-referrer"
				src="https://lanhu-oss.lanhuapp.com/a10bed8a88171a48af15a659bad5fbb2" />
			<view class="group_3 flex-row">
				<view class="group_4 flex-col"></view>
				<view class="group_5 flex-col justify-between">
					<view class="text-group_1 flex-col justify-between">
						<text class="text_6">1.60防蓝光配镜套餐</text>
						<view class="text_7">
							无度数防蓝光镜片【可试戴7天无理由退换】
						</view>
					</view>
					<view class="group_6 flex-row justify-between">
						<view class="text-wrapper_2">
							<text class="text_8">￥</text>
							<text class="text_9">16.8</text>
						</view>
						<text class="text_10">已好评</text>
					</view>
				</view>
				<image class="image_2" referrerpolicy="no-referrer"
					src="https://lanhu-oss.lanhuapp.com/11c97f3a3313dbce746b9f0002f93ae4" />
			</view>
			<view class="group_7 flex-col"></view>
		</view>
		<view class="group_14">
			<!-- 购物车 -->
			<view class="card flex-col">
				<image class="label_1" referrerpolicy="no-referrer"
					src="https://lanhu-oss.lanhuapp.com/c6717c5bc595ce9259ae9c91f266272d" />
				<view class="text-wrapper_5 flex-col">
					<text class="text_25">8</text>
				</view>
			</view>

			<!-- 返回顶部 -->
			<view class="group_13 flex-col" @click="Totop">
				<uni-icons type="arrow-up" size="30"></uni-icons>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['全部评价', '待评价'],
				current: 0,
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
			}
		},
		methods: {
			onClickItem(e) {
				console.log(11)
				
			},
			Totop() {
				uni.pageScrollTo({
					scrollTop: 0, //滚动到页面的目标位置
					duration: 300
				});

			}

		}
	}
</script>



<style scoped lang="scss">
	.group_14 {

		position: fixed;
		right: 30rpx;
		bottom: 20rpx;

		.card {
			box-shadow: 0px 4px 29px 0px rgba(93, 93, 93, 0.2);
			background-color: rgba(255, 255, 255, 1);
			border-radius: 50%;
			height: 97.91666666666667rpx;
			width: 97.91666666666667rpx;

			.label_1 {
				width: 44.791666666666664rpx;
				height: 44.791666666666664rpx;
				margin: 29.166666666666668rpx 0 0 26.041666666666668rpx;
			}

			.text-wrapper_5 {
				background-color: rgba(255, 63, 59, 1);
				border-radius: 50%;
				height: 41.666666666666664rpx;
				width: 41.666666666666664rpx;
				position: absolute;
				left: 65.625rpx;
				top: -8.333333333333334rpx;

				.text_25 {
					width: 12.5rpx;
					height: 19.791666666666668rpx;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 25rpx;
					font-family: Adobe Heiti Std R;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
					line-height: 36.458333333333336rpx;
					margin: 9.375rpx 0 0 14.583333333333334rpx;
				}
			}
		}

		.group_13 {
			box-shadow: 0px 4px 29px 0px rgba(93, 93, 93, 0.2);
			background-color: rgba(255, 255, 255, 1);
			border-radius: 50%;
			height: 97.91666666666667rpx;
			width: 97.91666666666667rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.box_8 {
				background-color: rgba(89, 89, 89, 1);
				width: 35.416666666666664rpx;
				height: 34.375rpx;
			}
		}


	}


	.box_4 {
		width: 100%;

		.group_1 {
			background-color: rgba(197, 179, 168, 1);
			border-radius: 2px;
			width: 41.666666666666664rpx;
			height: 4.166666666666667rpx;
			margin: 40.625rpx 0 0 171.875rpx;
		}

		.group_2 {
			background-color: rgba(251, 251, 252, 1);
			width: 750rpx;
			height: 20.833333333333332rpx;
		}

		.text_4 {
			width: 220.83333333333334rpx;
			height: 18.75rpx;
			overflow-wrap: break-word;
			color: rgba(180, 181, 190, 1);
			font-size: 25rpx;
			font-family: PingFangSC-Heavy;
			font-weight: 900;
			text-align: left;
			white-space: nowrap;
			line-height: 33.333333333333336rpx;
			margin: 30.208333333333332rpx 0 0 29.166666666666668rpx;
		}

		.text_5 {
			width: 697.9166666666666rpx;
			height: 109.375rpx;
			overflow-wrap: break-word;
			color: rgba(50, 62, 70, 1);
			font-size: 27.083333333333332rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			text-align: justify;
			line-height: 41.666666666666664rpx;
			margin: 27.083333333333332rpx 0 0 29.166666666666668rpx;
			display: block;
		}

		.group_3 {
			display: flex;
			align-items: center;
			background-color: rgba(251, 251, 252, 1);
			border-radius: 10px;
			position: relative;
			width: 687.5rpx;
			height: 145.83333333333334rpx;
			margin: 21.875rpx 0 0 30.208333333333332rpx;

			.group_4 {
				background-color: rgba(180, 215, 254, 1);
				border-radius: 6px;
				width: 104.16666666666667rpx;
				height: 104.16666666666667rpx;
				margin: 21.875rpx 0 0 19.791666666666668rpx;
			}

			.group_5 {
				width: 316.6666666666667rpx;
				height: 103.125rpx;
				margin: 22.916666666666668rpx 232.29166666666666rpx 0 14.583333333333334rpx;

				.text-group_1 {
					width: 316.6666666666667rpx;
					height: 59.375rpx;

					.text_6 {
						width: 271.875rpx;
						height: 28.125rpx;
						overflow-wrap: break-word;
						color: rgba(21, 31, 56, 1);
						font-size: 27.083333333333332rpx;
						font-family: PingFangSC-Heavy;
						font-weight: 900;
						text-align: left;
						white-space: nowrap;
						line-height: 36.458333333333336rpx;
					}

					.text_7 {
						width: 314.5833333333333rpx;
						height: 21.875rpx;
						overflow-wrap: break-word;
						color: rgba(135, 140, 154, 1);
						font-size: 22.916666666666668rpx;
						font-family: PingFangSC-Heavy;
						font-weight: 900;
						text-align: left;
						white-space: nowrap;
						line-height: 10rpx;
						margin: 9.375rpx 0 0 2.0833333333333335rpx;
					}
				}

				.group_6 {
					width: 172.91666666666666rpx;
					margin-top: 19.791666666666668rpx;
					display: flex;

					.text-wrapper_2 {
						width: 81.25rpx;
						overflow-wrap: break-word;
						font-size: 0;
						font-family: Adobe Heiti Std R;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						margin-top: 1.0416666666666667rpx;
						margin-right: 10rpx;

						.text_8 {
							width: 81.25rpx;
							overflow-wrap: break-word;
							color: rgba(50, 62, 70, 1);
							font-size: 27.083333333333332rpx;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
						}

						.text_9 {
							width: 81.25rpx;
							overflow-wrap: break-word;
							color: rgba(50, 62, 70, 1);
							font-size: 29.166666666666668rpx;
							font-family: PingFangSC-Heavy;
							font-weight: 900;
							text-align: left;
							white-space: nowrap;
						}
					}

					.text_10 {
						width: 71.875rpx;
						overflow-wrap: break-word;
						color: rgba(232, 185, 155, 1);
						font-size: 30rpx;
						font-family: PingFangSC-Heavy;
						text-align: left;
						white-space: nowrap;
						margin-left: 5rpx;
					}
				}
			}

			.image_2 {
				position: absolute;
				left: 19.791666666666668rpx;
				top: 21.875rpx;
				width: 106.25rpx;
				height: 105.20833333333333rpx;
			}
		}

		.group_7 {
			background-color: rgba(251, 251, 252, 1);
			width: 748.9583333333334rpx;
			height: 20.833333333333332rpx;
			margin: 31.25rpx 0 0 1.0416666666666667rpx;
		}

		.text_11 {
			width: 201.04166666666666rpx;
			height: 19.791666666666668rpx;
			overflow-wrap: break-word;
			color: rgba(180, 181, 190, 1);
			font-size: 25rpx;
			font-family: Adobe Heiti Std R;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 33.333333333333336rpx;
			margin: 32.291666666666664rpx 0 0 29.166666666666668rpx;
		}

		.text_12 {
			width: 679.1666666666666rpx;
			height: 68.75rpx;
			overflow-wrap: break-word;
			color: rgba(50, 62, 70, 1);
			font-size: 27.083333333333332rpx;
			font-family: Adobe Heiti Std R;
			font-weight: normal;
			text-align: justifyLeft;
			line-height: 41.666666666666664rpx;
			margin: 26.041666666666668rpx 0 0 29.166666666666668rpx;
		}

		.image_3 {
			width: 202.08333333333334rpx;
			height: 202.08333333333334rpx;
			margin: 17.708333333333332rpx 0 0 30.208333333333332rpx;
		}

		.group_8 {
			background-color: rgba(251, 251, 252, 1);
			border-radius: 10px;
			position: relative;
			width: 687.5rpx;
			height: 145.83333333333334rpx;
			margin: 25rpx 0 0 30.208333333333332rpx;

			.box_5 {
				background-color: rgba(180, 215, 254, 1);
				border-radius: 6px;
				width: 104.16666666666667rpx;
				height: 104.16666666666667rpx;
				margin: 20.833333333333332rpx 0 0 19.791666666666668rpx;
			}

			.box_6 {
				width: 381.25rpx;
				height: 102.08333333333333rpx;
				margin: 23.958333333333332rpx 167.70833333333334rpx 0 14.583333333333334rpx;

				.text-group_2 {
					width: 380.2083333333333rpx;
					height: 57.291666666666664rpx;
					margin-left: 1.0416666666666667rpx;

					.text_13 {
						width: 380.2083333333333rpx;
						height: 27.083333333333332rpx;
						overflow-wrap: break-word;
						color: rgba(21, 31, 56, 1);
						font-size: 27.083333333333332rpx;
						font-family: Adobe Heiti Std R;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 36.458333333333336rpx;
					}

					.text_14 {
						width: 246.875rpx;
						height: 22.916666666666668rpx;
						overflow-wrap: break-word;
						color: rgba(135, 140, 154, 1);
						font-size: 22.916666666666668rpx;
						font-family: Adobe Heiti Std R;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 36.458333333333336rpx;
						margin: 7.291666666666667rpx 0 0 2.0833333333333335rpx;
					}
				}

				.block_1 {
					width: 172.91666666666666rpx;
					height: 23.958333333333332rpx;
					margin-top: 20.833333333333332rpx;

					.text-wrapper_3 {
						width: 81.25rpx;
						height: 22.916666666666668rpx;
						overflow-wrap: break-word;
						font-size: 0;
						font-family: Adobe Heiti Std R;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 27.083333333333332rpx;

						.text_15 {
							width: 81.25rpx;
							height: 22.916666666666668rpx;
							overflow-wrap: break-word;
							color: rgba(50, 62, 70, 1);
							font-size: 27.083333333333332rpx;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 27.083333333333332rpx;
						}

						.text_16 {
							width: 81.25rpx;
							height: 22.916666666666668rpx;
							overflow-wrap: break-word;
							color: rgba(50, 62, 70, 1);
							font-size: 29.166666666666668rpx;
							font-family: PingFangSC-Heavy;
							font-weight: 900;
							text-align: left;
							white-space: nowrap;
							line-height: 29.166666666666668rpx;
						}
					}

					.text_17 {
						width: 71.875rpx;
						height: 23.958333333333332rpx;
						overflow-wrap: break-word;
						color: rgba(232, 185, 155, 1);
						font-size: 25rpx;
						font-family: PingFangSC-Heavy;
						font-weight: 900;
						text-align: left;
						white-space: nowrap;
						line-height: 25rpx;
					}
				}
			}

			.image_4 {
				position: absolute;
				left: 23.958333333333332rpx;
				top: 20.833333333333332rpx;
				width: 104.16666666666667rpx;
				height: 103.125rpx;
			}
		}

		.group_9 {
			background-color: rgba(251, 251, 252, 1);
			width: 748.9583333333334rpx;
			height: 20.833333333333332rpx;
			margin: 31.25rpx 0 0 1.0416666666666667rpx;
		}

		.text_18 {
			width: 201.04166666666666rpx;
			height: 19.791666666666668rpx;
			overflow-wrap: break-word;
			color: rgba(180, 181, 190, 1);
			font-size: 25rpx;
			font-family: Adobe Heiti Std R;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 33.333333333333336rpx;
			margin: 31.25rpx 0 0 29.166666666666668rpx;
		}

		.text_19 {
			width: 697.9166666666666rpx;
			height: 109.375rpx;
			overflow-wrap: break-word;
			color: rgba(50, 62, 70, 1);
			font-size: 27.083333333333332rpx;
			font-family: Adobe Heiti Std R;
			font-weight: normal;
			text-align: justifyLeft;
			line-height: 41.666666666666664rpx;
			margin: 26.041666666666668rpx 0 0 29.166666666666668rpx;
		}

		.group_10 {
			background-color: rgba(251, 251, 252, 1);
			border-radius: 10px;
			position: relative;
			width: 687.5rpx;
			height: 145.83333333333334rpx;
			margin: 20.833333333333332rpx 0 32.291666666666664rpx 30.208333333333332rpx;

			.group_11 {
				background-color: rgba(180, 215, 254, 1);
				border-radius: 6px;
				width: 104.16666666666667rpx;
				height: 104.16666666666667rpx;
				margin: 21.875rpx 0 0 19.791666666666668rpx;
			}

			.group_12 {
				width: 425rpx;
				height: 101.04166666666667rpx;
				margin: 25rpx 0 0 14.583333333333334rpx;

				.text-group_3 {
					width: 422.9166666666667rpx;
					height: 57.291666666666664rpx;
					margin-left: 2.0833333333333335rpx;

					.text_20 {
						width: 422.9166666666667rpx;
						height: 30.208333333333332rpx;
						overflow-wrap: break-word;
						color: rgba(21, 31, 56, 1);
						font-size: 27.083333333333332rpx;
						font-family: Adobe Heiti Std R;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 36.458333333333336rpx;
					}

					.text_21 {
						width: 315.625rpx;
						height: 22.916666666666668rpx;
						overflow-wrap: break-word;
						color: rgba(135, 140, 154, 1);
						font-size: 22.916666666666668rpx;
						font-family: Adobe Heiti Std R;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 36.458333333333336rpx;
						margin: 4.166666666666667rpx 0 0 1.0416666666666667rpx;
					}
				}

				.box_7 {
					width: 171.875rpx;
					height: 23.958333333333332rpx;
					margin-top: 19.791666666666668rpx;

					.text-wrapper_4 {
						width: 81.25rpx;
						height: 22.916666666666668rpx;
						overflow-wrap: break-word;
						font-size: 0;
						font-family: Adobe Heiti Std R;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 27.083333333333332rpx;
						margin-top: 1.0416666666666667rpx;

						.text_22 {
							width: 81.25rpx;
							height: 22.916666666666668rpx;
							overflow-wrap: break-word;
							color: rgba(50, 62, 70, 1);
							font-size: 27.083333333333332rpx;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 27.083333333333332rpx;
						}

						.text_23 {
							width: 81.25rpx;
							height: 22.916666666666668rpx;
							overflow-wrap: break-word;
							color: rgba(50, 62, 70, 1);
							font-size: 29.166666666666668rpx;
							font-family: PingFangSC-Heavy;
							font-weight: 900;
							text-align: left;
							white-space: nowrap;
							line-height: 29.166666666666668rpx;
						}
					}

					.text_24 {
						width: 70.83333333333333rpx;
						height: 23.958333333333332rpx;
						overflow-wrap: break-word;
						color: rgba(232, 185, 155, 1);
						font-size: 25rpx;
						font-family: Adobe Heiti Std R;
						font-weight: normal;
						text-align: left;
						white-space: nowrap;
						line-height: 25rpx;
					}
				}
			}



			.image_5 {
				position: absolute;
				left: 19.791666666666668rpx;
				top: 21.875rpx;
				width: 105.20833333333333rpx;
				height: 104.16666666666667rpx;
			}
		}


	}
</style>
